<template>
	<div>
		<div class="icons flexRow  ">
			<!-- 循环 图标库 -->
			<div class="icon-item" v-for="(item,index) in Data">
				<router-link :to="{path:'/icons',query:{name:item.name,label:item.label}}" tag="div" class="icon-img ">
					<img class="icon1" referrerpolicy="no-referrer"
						:src="item.url">
				</router-link>
				<div class="icon-text ">{{item.label}}</div>
			</div>
			
		</div>
	</div>
</template>

<script>
	import Iconsdata from './Icons.js'
	export default {

		name: "icons",
		data() {
			return {
				Data: []
			}
		},
		created() {
			
		},
		mounted() {
			//判断处于哪一个位置的图标
			if(this.$route.path == '/'){
				this.Data = Iconsdata[0].icons
			}else if(this.$route.path == '/mine'){
				this.Data = Iconsdata[1].icons
			}else if(this.$route.path == '/video'){
				this.Data = Iconsdata[2].icons
			}else if(this.$route.path == '/userinfo'){
				this.Data = Iconsdata[1].userInfo[0].icons1
				console.log(this.Data)
			}

			
		},
		methods: {

		}
	}
</script>

<style>
	.icon-img {
		z-index: 19;
		width: 49px;
		height: 49px;
	}

	.icon-text {
		z-index: 19;
		width: 49px;
		height: 15px;
		margin: 11px auto auto auto;
		text-align: center;
		font-size: 8px;
	}

	.icon-item {
		z-index: 18;
		width: 49px;
		height: 80px;
	}

	.icons {
		z-index: auto;
		width: 330px;
		height: 80px;
		justify-content: space-between;
		margin: 21px auto;
	}
</style>
